<script lang="ts" setup>
import useShowMore from "../../hooks/useShowMore";
import { getSvg } from "@/utils";

const { show, toggleShowAll } = useShowMore();
</script>
<template>
  <div>
    <p
      v-if="show"
      class="font-300 text-10 color-[rgba(24,109,200,0.6)] lh-12 text-center not-italic mb-7"
    >
      ด้านบนคือตัวเลขรางวัลทั้งหมดของงวดประจำวันที่ 16 ธันวาคม 2567
    </p>
    <div
      class="h-40 rounded-4 center gap-x-3 mb-0 active:bg-[#f7f7f7]"
      @click="toggleShowAll"
    >
      <span class="font-400 text-14 color-[#444] lh-16 not-italic">
        {{ show ? $t("title24") : $t("title23") }}
      </span>
      <img class="w-28 h-20" :src="getSvg(show ? 'Frame_598' : 'Frame_582')" />
    </div>
  </div>
</template>
